<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../dist-rollup/index.css">
</head>
<body>
<div id="app">

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="../dist-rollup/index.js"></script>
<!--<script src="../dest/index.js"></script>-->
<script>
    'use strict';

    const {createApp} = window.Vue

    const app = createApp({
        template: `
            <div>
                <pl-button v-for="item in ['primary','success','warn','error','info']" :key="item" :status="item" style="margin-right: 8px">
                    {{item}}
                </pl-button>
                <hr>
                <pl-input v-for="item in ['primary','success','warn','error','info']" :key="item" :status="item" style="margin-right: 8px" v-model="text"/>

                <div>
                    <span>普通的文本：</span>
                    <pl-icon icon="apps-fill"/>
                </div>
                <button @click="showFlag = true">
                    应用图标
                    <pl-icon icon="apps-line" v-if="showFlag"/>
                </button>
            </div>
        `,
        data(){
            return{
                text:'',
                showFlag:false,
            }
        },

    });
    console.log(window.PlainUI)
    app.use(window.PlainUI);
    app.mount('#app');
</script>
</body>
</html>